<template>
	<view>
		<uni-forms ref="form" :modelValue="shareForm" label-width="220rpx" label-align="right"
			style="margin-top:40rpx;padding: 0 30rpx 0 10rpx;">
			<uni-forms-item label="标准合同模板：" name="name">
				<span style="line-height: 72rpx;">{{shareForm.name}}</span>
			</uni-forms-item>
			<uni-forms-item label="模板分享密码：" name="shareCode">
				<div class="flex_row">
					<uni-easyinput type="text" v-model="shareForm.shareCode" disabled />
					<button class="copyBtn" v-clipboard:copy="shareForm.shareCode"
						v-clipboard:success="clipboardSuccess" v-clipboard:error="clipboardError">复制</button>
				</div>
			</uni-forms-item>
			<uni-forms-item label="模板分享期限：" name="shareEndTime">
				<uni-datetime-picker v-model="shareEndTime" type="datetime" :start="shareEndTime" :end="endTime" />
			</uni-forms-item>
			<div class="explain_v">
				<p>分享须知：</p>
				<p>（1）通过模板分享密码可将标准合同模板分享给业务伙伴。</p>
				<p>（2）集团内部企业及外部企业可通过模板分享密码提取合同模板。</p>
				<p>（3）已了解将模板分享给业务伙伴的潜在风险，自愿承担由此造成的一切损失。</p>
			</div>
		</uni-forms>
		<view class="footer-btn">
			<button @click="cancel" size="mini" class="cancel_btn">取消分享</button>
			<button @click="submitForm" size="mini" class="confirm_btn">确定分享</button>
		</view>
	</view>
</template>

<script>
	import {
		cancelShareCode,
		confirmShareCode,
		getShareCode
	} from "@/api/ec/console/busiConfig/templateShare";
	import {
		parseTime
	} from "@/utils/ruoyi";

	export default {
		data() {
			return {
				shareForm: {
					shareCode: null
				}, //分享form  
				shareEndTime: new Date(Date.now() + 24 * 60 * 60 * 1000), //模板分享期限
				endTime: new Date(Date.now() + 24 * 60 * 60 * 1000 * 30), //模板分享期限
			}
		},
		onLoad(option) {
			this.shareForm.id = option.id
			this.shareForm.name = option.name
			this.shareEndTime = parseTime(this.shareEndTime, "{y}-{m}-{d} {h}:{i}:{s}") //分享期限时间
			this.endTime = parseTime(this.endTime, "{y}-{m}-{d} {h}:{i}:{s}") //分享期限结束时间
			this.handleShare();
		},
		methods: {
			handleShare() {
				// 根据分享的模板id 创建分享码
				getShareCode({
					contractTemplateId: this.shareForm.id
				}).then((response) => {
					this.shareForm.shareCode = response.msg;
				});
			},
			/** 确定分享 */
			submitForm() {
				let params = {};
				params.contractTemplateId = this.shareForm.id;
				params.shareCode = this.shareForm.shareCode;
				params.shareEndTime = parseTime(this.shareEndTime, "{y}-{m}-{d} {h}:{i}:{s}") //转换时间格式
				confirmShareCode(params).then((response) => {
					this.$copyText(this.shareForm.shareCode).then(() => {
						this.$modal.msgSuccess("分享码已复制到剪切板，可粘贴。");
						setTimeout(() => {
							uni.navigateBack(1)
						}, 300)
					}, () => {
				  this.$modal.msgError("复制失败！");
					});
				});
			},
			/** 取消分享 */
			cancel() {
				cancelShareCode({
					shareCode: this.shareForm.shareCode
				}).then((response) => {
					this.$modal.msgError("取消共享");
					setTimeout(() => {
						uni.navigateBack(1)
					}, 300)
				});
			},
			/** 复制失败 */
			clipboardError() {
				this.$modal.msgError("复制失败");
			},
			/** 复制链接成功 */
			clipboardSuccess() {
				this.$modal.msgSuccess("复制成功");
			},
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .uni-datetime-picker-btn-text{
		color: $uni-color-primary;
	}
	.copyBtn {
		color: #13ce66;
		background: #e7faf0;
		border: 1px solid #a1ebc2;
		font-size: 28rpx;
		margin-left: 10rpx;

		&:hover {
			background: #67C23A;
			border-color: #67C23A;
			color: #FFF;
		}
	}

	.flex_row {
		display: flex;
		align-items: center;
	}

	page {
		background:$uni-bg-color;
	}

	::v-deep .uni-forms-item__label {
		font-size: 26rpx;
		padding: 0 12rpx 0 0;
	}

	.explain_v {
		font-size: 26rpx;
		color: #999999;
		margin-left: 24rpx;

		p {
			margin: 0;
			padding: 4rpx 0;
		}
	}

	.footer-btn {
		margin-top: 180rpx;
		width: 100%;
		text-align: center;

		.confirm_btn {
			margin-left: 50rpx;
			width: 40%;
			background-color: $uni-color-primary;
			color: #fff;
			display: inline-block;
			height: 70rpx;
			line-height: 70rpx;
		}
	}

	.cancel_btn {
		background-color: #fff;
		color: $uni-color-primary;
		width: 40%;
		display: inline-block;
		height: 70rpx;
		line-height: 70rpx;
		border: 1rpx solid $uni-color-primary;
	}
</style>
